<template>
  <div class="container">
    <div class="app-container">
      <el-button class="add-btn" size="mini" type="primary" @click="addPer">添加权限</el-button>
      <el-table :data="permissionList" row-key="id" default-expand-all>
        <el-table-column label="名称" align="center" prop="name">

        </el-table-column>
        <el-table-column label="标识" align="center" prop="code">
        </el-table-column>
        <el-table-column label="描述" align="center" prop="description">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row}" >
            <el-button v-if="row.type === 1" size="mini" type="text" @click="addAlonePer(row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="updatePer(row.id)">编辑</el-button>
            <el-popconfirm
              title="确定删除权限吗？"
              @onConfirm="deletePer(row.id)"
            >
            <el-button slot="reference" size="mini" type="text" style="margin-left: 10px;"  >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹框 -->
    <el-dialog @close="cancel" :title="title" :visible.sync="visibleShow" width="450px" >
      <el-form ref="addForm" label-width="100px" style="margin: 0 auto;" :model="addFrom" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="addFrom.name" style="width: 80%;" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="addFrom.code" style="width: 80%;"  size="mini"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="addFrom.description" style="width: 80%;"  size="mini" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="addFrom.enVisble">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-row class="btnconfirm" >
            <el-button size="mini" type="primary" @click="confirmForm">确定</el-button>
            <el-button size="mini" @click="cancel">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getPermissionList, addPermission, deletePermission, getPermissionDetail, updatePermission} from '@/api/permission'
import  {transListToTree} from '@/utils/index'

export default {
  data() {
    return {
      permissionList: [], // 权限列表
      visibleShow: false, // 弹出框控制
      // 表单数据收集
      addFrom: {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisble: '0',
      },
      // 表达校验规则
      rules: {
        name: [
          {
            required: true,
            message: '权限名称不能为空',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '权限标识不能为空',
            trigger: 'blur'
          }
        ]
      },
      title: '', //  弹出框标题2
      upId: 0 // 需要修改的权限点id

  }},
  methods: {
    // 获取权限数据
    async getPermissionData() {
      const res = await getPermissionList()
      // console.log(res);
      this.permissionList =  transListToTree(res, 0)

    },
    // 添加路由权限
    addPer() {
      this.title = '添加路由权限'
      this.visibleShow = true
      this.addFrom.pid = '0'
      this.addFrom.type = '1'
    },
    // 添加二级权限
    addAlonePer(pid) {
      this.title = '添加二级权限'
      this.visibleShow = true
      this.addFrom.pid = pid
      this.addFrom.type = '2'

    },
    // 弹出框确认提交
    confirmForm() {
      // console.log(this.addFrom);
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          if (this.upId) {
            const res = await updatePermission({...this.addFrom, id: this.upId})
            // console.log(res);
            this.$message.success('修改成功')
          }
          else {
            const res = await addPermission(this.addFrom)
          // console.log(res);
          this.$message.success('添加成功')
          }
          
          this.$refs.addForm.resetFields()
          this.getPermissionData()
          this.addFrom.description = ''
          this.visibleShow = false
        }
      })
      
    },
    // 弹出框取消
    cancel() {
      this.visibleShow = false
      this.addFrom = {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisble: '0',
        
      }
    },
    // 行内权限点删除
    async deletePer(id) {
      const res = await deletePermission(id)
      // console.log(res);
      this.$message.success('删除成功')
      this.getPermissionData()
    },
    // 行内权限点修改
    async updatePer(id) {
      this.upId = id
      this.visibleShow = true
      this.title = '修改权限点'
      const res = await getPermissionDetail(id)
      console.log(res);
      this.addFrom.name = res.name
      this.addFrom.code = res.code
      this.addFrom.description = res.description
      this.addFrom.type = res.type
      this.addFrom.pid = res.pid
      this.addFrom.enVisble = res.enVisble
    }
  },
  // 页面初始化渲染数据
  created() {
    this.getPermissionData()
  }
}
</script>

<style  scoped>
.add-btn {
  margin: 10px;

}
.btnconfirm {
  padding-left: 50px;
}
</style>